<template>
  <div>
    <div class="page" v-show="ifshow">
      <div class="bgc"></div>
      <div class="jianjie">
        <div class="img">
          <img src="../assets/个人中心/头像男 拷贝 4.png" alt="" />
        </div>
        <p>{{ Arr.remark }}</p>
        <div class="bottom">
          <div>
            姓名<span>{{ Arr.nickName }}</span>
          </div>
          <div>
            联系方式<span>{{ Arr.phone }}</span>
          </div>
        </div>
      </div>
      <ul>
        <li>
          <div class="l">
            <img
              src="../assets/个人中心/Personal information.png"
              width="16"
              alt=""
            />
            个人信息
          </div>
          <div class="r" @click="goUserXQ">
            <img src="../assets/Shipment/jiantou.png" width="7" alt="" />
          </div>
        </li>
        <li>
          <div class="l">
            <img src="../assets/个人中心/形状 2.png" width="16" alt="" />
            支付中心
          </div>
          <div class="r">
            <img src="../assets/Shipment/jiantou.png" width="7" alt="" />
          </div>
        </li>
        <li>
          <div class="l">
            <img
              src="../assets/个人中心/change Password.png"
              width="16"
              alt=""
            />
            修改密码
          </div>
          <div class="r">
            <img src="../assets/Shipment/jiantou.png" width="7" alt="" />
          </div>
        </li>
        <li>
          <div class="l" >
            <img
              src="../assets/个人中心/Version Information.png"
              width="16"
              alt=""
            />
            版本信息
          </div>
          <div class="r" @click="ifshow=!ifshow">
            <span>版本{{ Arr1.versions }}</span
            ><img src="../assets/Shipment/jiantou.png" width="7" alt="" />
          </div>
        </li>
        <li>
          <div class="l">
            <img src="../assets/个人中心/组 16.png" width="16" alt="" />
            清除缓存
          </div>
          <div class="r">
            <img src="../assets/Shipment/jiantou.png" width="7" alt="" />
          </div>
        </li>
      </ul>
      <button class="btn" @click="Modelshow=!Modelshow">退出登录</button>
      <div class="model" v-show="Modelshow">
        <div class="bgc"></div>
        <div class="text">
          <p>退出登录</p>
          <div>
            <button @click="Modelshow=!Modelshow">取消</button>
            <button @click="tuichu">确定</button>
          </div>
        </div>
      </div>
      <div class="page-bottom">
        <div>
          <img src="../assets/个人中心/矢量智能对象-2.png" width="25" alt="" />
          <p>系统功能</p>
        </div>
        <div>
          <img src="../assets/个人中心/联系2.png" width="25" alt="" />
          <p>联系</p>
        </div>
        <div>
          <img src="../assets/个人中心/矢量智能对象.png" width="25" alt="" />
          <p class="active">个人中心</p>
        </div>
      </div>
    </div>
    <Banben :Arr1='Arr1' v-show="!ifshow" @ifshowfn='ifshowfn'/>
  </div>
</template>

<script>
import { Userslist, Usersversion } from "../request/api";
import Banben from "./Banben";
export default {
  data() {
    return {
      Arr: [],
      //版本号
      Arr1: [],
      ifshow:true,
      //model框显示
      Modelshow:false
    };
  },
  components: {
    Banben,
  },
  created() {
    Userslist().then((res) => {
        this.Arr=res.data
    });
    Usersversion().then((res) => {
      this.Arr1 = res.data;
    });
  },
  methods:{
      ifshowfn(){
          this.ifshow=!this.ifshow
      },
      goUserXQ(){
          this.$router.push('/userXQ')
      },
      tuichu(){
          localStorage.removeItem('token')
          this.$router.push('/login')
      }
  }
};
</script>
 
<style lang = "less" scoped>
.page {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  .bgc {
    background-color: #1f4ba2;
    width: 100%;
    height: 180px;
  }
  .jianjie {
    position: relative;
    top: -60px;
    left: 18px;
    background-color: #fff;
    width: 90%;
    height: 150px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(250, 252, 252, 0);
    .img {
      position: absolute;
      left: 50%;
      top: -63px;
      margin-left: -55px;
    }
    p {
      text-align: center;
      margin-top: 75px;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      padding: 0 15px;
      div {
        color: #9a9a9a;
        span {
          margin-left: 10px;
          color: #333;
        }
      }
    }
  }
  ul {
    width: 100%;
    margin-top: -45px;
    background-color: #fff;
    box-sizing: border-box;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      border-bottom: 1px solid #e5e5e5;
      padding: 10px;
      .l {
        display: flex;
        align-items: center;

        img {
          margin-right: 10px;
        }
      }
      .r {
        span {
          color: #ccc;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {
    width: 90%;
    height: 50px;
    background-color: #e9e9e9;
    border: 0;
    margin: 10px 20px;
    border-radius: 5px;
    color: #666666;
  }
  .page-bottom {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    div {
      text-align: center;
      p {
        color: #9c9c9c;
        /* margin-top: 2px; */
        font-size: 14px;
      }
      .active {
        color: #013299;
      }
    }
  }
}
.model{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  .bgc{
  width: 100%;
  height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .text{
    width: 70%;
    height: 150px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    p{
      text-align: center;
      padding: 40px;
    }
    div{
      display: flex;
      align-items: center;
      button{
        border: 0;
        width: 50%;
        height: 50px;
        background-color: #fff;
        color: #ccc;
        border-top: 1px solid #ccc;
      }
      button:nth-of-type(2){
        color: skyblue;
        border-left: 1px solid #ccc;
      }
    }
  }
  
}
</style>